<template>
  <h2>toRef的使用</h2>
  <hr />
  <button @click="update">更新数据</button>
  <h2>state:{{ state }}</h2>
  <h2>age:{{ age }}</h2>
  <h2>money:{{ money }}</h2>
  <hr />
  <Child :age="age" />
</template>
<script lang="ts">
import { defineComponent, reactive, toRef, ref } from "vue";
import Child from "./Child/Child.vue";
export default defineComponent({
  name: "App",
  components: {
    Child,
  },
  setup() {
    const state = reactive({
      age: 10,
      money: 100,
    });
    // 为源响应式对象上的某个属性创建一个 ref对象, 二者内部操作的是同一个数据值, 更新时二者是同步的
    const age = toRef(state, "age");
    // ref: 拷贝了一份新的数据值单独操作, 更新时相互不影响
    const money = ref(state.money);
    console.log(age, money);
    const update = () => {
      state.age += 10;
      console.log("更新");
      // age.value += 10;
      // money.value += 10;
    };

    return { update, state, age, money };
  },
});
</script>

<style>
</style>
